<template>
  <div class="department-management">
    <div class="header">
      <h2>部门与角色管理</h2>
      <div class="search-bar">
        <input
            type="text"
            placeholder="请输入部门名称关键词查询"
            v-model="searchKeyword"
        >
        <button @click="searchDepartments">查询</button>
        <button @click="resetSearch">重置</button>
      </div>
    </div>

    <div class="action-bar">
      <button>快速找人</button>
      <button>添加成员</button>
      <button>添加部门</button>
      <button>数据导出</button>
    </div>

    <table class="department-table">
      <thead>
      <tr>
        <th>序号</th>
        <th>部门名称</th>
        <th>部门代码</th>
        <th>部门类型</th>
        <th>成员人数</th>
        <th>添加时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(dept, index) in filteredDepartments" :key="dept.id">
        <td>{{ index + 1 }}</td>
        <td>{{ dept.name }}</td>
        <td>{{ dept.code }}</td>
        <td>{{ dept.type }}</td>
        <td>{{ dept.memberCount }}</td>
        <td>{{ dept.addTime }}</td>
        <td class="actions">
          <button @click="viewMembers(dept)">查看成员</button>
          <div class="dropdown">
            <button class="dropdown-toggle">更多</button>
            <div class="dropdown-menu">
              <a @click="activateDepartment(dept)">激活账户</a>
              <a @click="freezeDepartment(dept)">冻结账户</a>
              <a @click="removeDepartment(dept)">移除部门</a>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

interface Department {
  id: number
  name: string
  code: string
  type: string
  memberCount: number
  addTime: string
}

const router = useRouter()
const searchKeyword = ref('')

// 模拟部门数据
const departments: Department[] = [
  { id: 1, name: 'As部门', code: 'xy_1001', type: '行政部门', memberCount: 3, addTime: '2023/10/17 16:57:35' },
  { id: 2, name: 'A学院', code: 'xy_1002', type: '数字部门', memberCount: 3, addTime: '2023/10/17 16:57:35' },
  { id: 3, name: 'B部门', code: 'xy_1003', type: '行政部门', memberCount: 3, addTime: '2023/10/17 16:57:35' },
  { id: 4, name: 'B学院', code: 'xy_1004', type: '数字部门', memberCount: 3, addTime: '2023/10/17 16:57:35' },
  { id: 5, name: 'C部门', code: 'xy_1005', type: '行政部门', memberCount: 3, addTime: '2023/10/17 16:57:35' }
]

const filteredDepartments = computed(() => {
  if (!searchKeyword.value) return departments
  return departments.filter(dept =>
      dept.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

function searchDepartments() {
  // 搜索逻辑已在计算属性中处理
}

function resetSearch() {
  searchKeyword.value = ''
}

function viewMembers(dept: Department) {
  router.push({
    name: 'DepartmentMembers',
    query: { departmentCode: dept.code }
  })
}

function activateDepartment(dept: Department) {
  console.log('激活部门:', dept.name)
}

function freezeDepartment(dept: Department) {
  console.log('冻结部门:', dept.name)
}

function removeDepartment(dept: Department) {
  console.log('移除部门:', dept.name)
}
</script>

<style scoped>
.department-management {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-bar input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 250px;
}

button {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #2980b9;
}

.action-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.department-table {
  width: 100%;
  border-collapse: collapse;
}

.department-table th,
.department-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.department-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 8px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background-color: #6c757d;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
  z-index: 100;
  overflow: hidden;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-menu a:hover {
  background-color: #f8f9fa;
}
</style>